<template>
  <div class="table-page" style="display: flex;flex-direction: column;justify-content: center;align-items: baseline;flex-wrap: wrap;">
    <a-row style="width: 1200px; height: 1200px; margin: 0 auto;display: flex" >
      <a-col :span="12" style="width: 600px; height: 450px;">
        <div ref="chartDom" style="width: 500px; height: 450px;"></div>
      </a-col>
      <a-col :span="12">
        <div ref="rightChartDom" style="width: 400px; height: 450px;"></div>
      </a-col>
    </a-row>
  </div>
</template>
<script>

function genData() {
  // 从后端获取数据
  const legendData = ['21软工2班', '21软工3班', '21软工4班', '21软工5班', '21软工6班', '21软工7班', '21软工8班', '21软工9班', '21软工10班', '21软工11班'];
  const seriesData = [
    { name: '21软工2班', value: 10 },
    { name: '21软工3班', value: 20 },
    { name: '21软工4班', value: 30 },
    { name: '21软工5班', value: 40 },
    { name: '21软工6班', value: 50 },
    { name: '21软工7班', value: 60 },
    { name: '21软工8班', value: 70 },
    { name: '21软工9班', value: 80 },
    { name: '21软工10班', value: 90 },
    { name: '21软工11班', value: 100 }
  ];
  return {
    legendData: legendData,
    seriesData: seriesData
  };
}
</script>
<script setup>
import { ref, onMounted, onUnmounted, nextTick } from 'vue';
import * as echarts from 'echarts';

// 创建一个响应式引用来保存DOM元素
const chartDom = ref(null);
const rightChartDom = ref(null);
let chartInstance = null;
let rightChartInstance = null;

// 初始化ECharts实例并设置配置项（这里以折线图为例，但可灵活替换）
onMounted(async () => {
  await nextTick(); // 确保DOM已经渲染完成
  chartInstance = echarts.init(chartDom.value);
  rightChartInstance = echarts.init(rightChartDom.value);
  const data = genData();
  const option = {
    title: {
      text: '奖牌数量统计',
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
      type: 'scroll',
      orient: 'vertical',
      right: 10,
      top: 20,
      bottom: 20,
      data: data.legendData
    },
    series: [
      {
        name: '奖牌数量',
        type: 'pie',
        radius: '55%',
        center: ['40%', '50%'],
        data: data.seriesData,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };
  const rightOption = {
    title: {
      text: '奖牌榜'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {},
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      boundaryGap: [0, 0.01]
    },
    yAxis: {
      type: 'category',
      data: ['21软工1班', '21软工2班', '21软工3班', '21软工4班', '21软工5班', '21软工6班']
    },
    series: [
      {
        name: '金牌',
        type: 'bar',
        data: [10, 20, 30, 40, 50, 60]
      },
      {
        name: '银牌',
        type: 'bar',
        data: [15, 25, 35, 45, 55, 65]
      },
      {
        name: '铜牌',
        type: 'bar',
        data: [20, 30, 40, 50, 60, 70]
      }
    ]
  };
  rightChartInstance.setOption(rightOption);
  chartInstance.setOption(option);
});

// 销毁ECharts实例
onUnmounted(() => {
  if (chartInstance != null && chartInstance.dispose) {
    chartInstance.dispose();
  }
});

</script>

<style scoped>
/* 添加一些CSS样式来美化图表容器（可选） */
</style>
